<template>
    <div class="user-div">
        <div class="userInfo-div">
            <div class="user-avatar">
                <div>
                    <img :src="userInfo.showAvatar" alt="用户头像">
                </div>
                <div>
                    <span>{{ userInfo.username }}</span>
                </div>
            </div>
            <div>
                <van-icon name="setting-o" @click="$router.push('/user/edit')" />
            </div>
        </div>
        <div class="user-order">
            <div class="user-order-title">
                <div class="user-order-title-main">
                    <span>我的订单</span>
                </div>
                <div class="user-order-title-more">
                    <span @click="$router.push('/user/order')">查看更多</span>
                </div>
            </div>
            <van-grid>
                <van-grid-item icon="paid" text="待付款" @click="$router.push('/user/order?tag=1')" />
                <van-grid-item icon="hotel-o" text="待服务" @click="$router.push('/user/order?tag=2')" />
                <van-grid-item icon="like-o" text="服务中" @click="$router.push('/user/order?tag=3')" />
                <van-grid-item icon="flower-o" text="待评价" @click="$router.push('/user/order?tag=4')" />
            </van-grid>
        </div>
        <div class="user-op">
            <div @click="$router.push('/user/address')">
                <DisplayLine f="我的地址" ficon="location-o" sicon="arrow"></DisplayLine>
            </div>
            <div @click="$router.push('/user/deal')">
                <DisplayLine f="服务记录" ficon="notes-o" sicon="arrow"></DisplayLine>
            </div>
            <div>
                <DisplayLine f="我的评价" ficon="orders-o" sicon="arrow"></DisplayLine>
            </div>
            <div>
                <DisplayLine f="我的付款" ficon="balance-o" sicon="arrow"></DisplayLine>
            </div>
        </div>
    </div>
</template>

<script>
import DisplayLine from '@/components/DisplayLine'
export default {
    name: "User",
    components: {
        DisplayLine
    },
    data() {
        return {
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.$store.dispatch('getUserInfo')
            if (!res.success) this.$myFun.resError(res.message)
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo
        },
    }
}
</script>

<style scoped>
.user-div {
    width: 90%;
    margin: 0 auto;
}

.userInfo-div {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5% 0 5%;
}

.userInfo-div .van-icon {
    font-size: 20px;
    color: gray;
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-avatar img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    border-radius: 50%;
}

.user-order-title {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-order-title-main {
    font-size: 1rem;
}

.user-order-title-more {
    font-size: 0.8rem;
    color: gray;
}

.user-order {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.user-op {
    padding: 0 5% 0 5%;
}
</style>